let [...slides] = document.querySelectorAll(".slide");
var next_btn = document.querySelector(".next-btn");
var prev_btn = document.querySelector(".prev-btn");
var pagination_ele = document.querySelector(".pagination");
var pagination_arr = []
var now_index = 0;
var prev_index = 0
let creatpag = () => {
    let pagin_ele = document.createDocumentFragment();
    slides.forEach((ele, index) => {
        let i = document.createElement("i")
        pagin_ele.appendChild(i)
        pagination_arr.push(i);
        now_index === index ? i.className = " active" : "";

    })
    pagination_ele.appendChild(pagin_ele)
}
let bindEvent = () => {
    next_btn.onclick = function () {
        prev_index = now_index;
        if (now_index === slides.length - 1) {
            now_index = 0;
        } else {
            now_index++;
        }
        changeSlide();
    }
    prev_btn.onclick = function () {
        prev_index = now_index;
        if (now_index === 0) {
            now_index = slides.length - 1;
        } else {
            now_index--;
        }
        changeSlide();
    }
    pagination_arr.forEach((ele, index) => {
        ele.onclick = () => {
            if (index === now_index) { return false }
            prev_index = now_index;
            now_index = index
            changeSlide()
        }

    })
}
let changeSlide = () => {
    slides.forEach((ele, index) => {
        ele.className = ele.className.replace(/\s?active-(now|prev)/g, "");
        pagination_arr[index].className = ""
    })
    slides[now_index].className += " active-now"
    slides[prev_index].className += " active-prev"

    slides[now_index].style.opacity = 0;
    animate(slides[now_index], { opacity: 1 })
    slides[prev_index].style.opacity = 1;
    animate(slides[prev_index], { opacity: 0 })
    pagination_arr[now_index].className = " active"
}
creatpag();
bindEvent();
setInterval(next_btn.onclick, 2000)